<template>
	<view style="display: flex;flex-wrap: wrap;"
	:style="{
	    'background': nodeModel.configDict.componentStyle.background,
		'flex-direction': nodeModel.configDict.componentStyle.flex_direction,
		'justify-content': nodeModel.configDict.componentStyle.justify_content,
		'align-items': nodeModel.configDict.componentStyle.align_items,
		'marginTop': nodeModel.configDict.componentStyle.marginTop+'rpx',
		'marginBottom': nodeModel.configDict.componentStyle.marginBottom+'rpx',
		'marginLeft': nodeModel.configDict.componentStyle.marginLeft+'rpx',
		'marginRight': nodeModel.configDict.componentStyle.marginRight+'rpx',
		'paddingTop': nodeModel.configDict.componentStyle.paddingTop+'rpx',
		'paddingBottom': nodeModel.configDict.componentStyle.paddingBottom+'rpx',
		'paddingLeft': nodeModel.configDict.componentStyle.paddingLeft+'rpx',
		'paddingRight': nodeModel.configDict.componentStyle.paddingRight+'rpx'
		}">
		<div v-if="nodeModel.configDict.itemStyle.isShowForText2 && nodeModel.configDict.itemStyle.isShowForText2ForPair" :style="{
		  'background': nodeModel.configDict.itemStyle.backgroundForText2,
		  'width': nodeModel.configDict.itemStyle.widthForText2 + 'rpx',
		  'height': nodeModel.configDict.itemStyle.heightForText2 + 'rpx',
		}"></div>
		<div v-if="nodeModel.configDict.itemStyle.isShowForText1" :style="{
		  'margin': nodeModel.configDict.componentStyle.flex_direction=='row'||nodeModel.configDict.componentStyle.flex_direction=='row-reverse' ? '0 ' + nodeModel.configDict.itemStyle.marginForText1+'rpx':'20rpx',
		  'color': nodeModel.configDict.itemStyle.colorForText1,
		  'font-size': nodeModel.configDict.itemStyle.fontsizeForText1 + 'rpx',
		  'font-weight': nodeModel.configDict.itemStyle.fontweightForText1,
		}">{{nodeModel.configDict.itemStyle.text1}}</div>
		<div v-if="nodeModel.configDict.itemStyle.isShowForText2" :style="{
		  'background': nodeModel.configDict.itemStyle.backgroundForText2,
		  'width': nodeModel.configDict.itemStyle.widthForText2 + 'rpx',
		  'height': nodeModel.configDict.itemStyle.heightForText2 + 'rpx',
		}"></div>
		<!-- 更多按钮 -->
		<div v-if="nodeModel.configDict.itemStyle.isShowForBtn1" style="position: absolute;right: 20rpx;display: flex;flex-direction: row;align-items: center;"
		@click="itemHandle(nodeModel.configDict.itemStyle)"
		:style="{
		  'color': nodeModel.configDict.itemStyle.colorForBtn1,
		  'font-size': nodeModel.configDict.itemStyle.fontsizeForBtn1 + 'rpx',
		}">{{ nodeModel.configDict.itemStyle.titleForBtn1 }}<u-icon name="arrow-right"></u-icon></div>
			
	</view>
</template>

<script>
	import {count} from '@/common/utils/count.js'
	export default{
		name: 'jc-grid',
		props: {
			nodeModel: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
			}
		},
		mounted() {
			console.log('挂载')
		},
		methods:{
			loadData(){
				console.log('加载数据')
			},
			itemHandle(e){
				this.$emit('itemHandle', e)
			}
		}
	}
</script>

<style>
</style>
